<template>
  <div class="new-fan-main">
    <div class="new-fan-head">
      <div class="head-title">
        接受新客户
      </div>
    </div>
    <el-form 
      ref="form"
      :model="form"
      label-width="120px"
      class="new-fan-body"
      label-position="left"
    >
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-content">
            <div class="flex-grid-row">
              <img class="cover-image" src="@/assets/images/add_firend_box_status.gif" />
              <div class="context">
                <div class="status">任务执行中</div>
                <div class="desc">
                  今日已接受位
                  <span style="color: rgb(47, 84, 235);">0</span>
                  客户的添加申请，还有
                  <span style="color: rgb(47, 84, 235);">0</span>
                  位在等待接受中
                </div>
              </div>
              <el-button class="btn" type="primary" plain size="small">停用</el-button>
              <el-button class="btn" plain size="small" @click="taskInfoVisible = true">查看详情</el-button>
            </div>
          </div>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">打开企业微信手机客户端，“设置-隐<br/>私-加我为联系人时需要验证”的开关打<br/>开，否则该功能无法生效</div>
                <span class="tips-text">为什么没有生效？</span>
            </el-tooltip>
          </div>
          <div class="card-content">
            <el-form-item label="接受上限：">
              <el-radio-group v-model="form.toplimit">
                <el-radio label="1">不限</el-radio>
                <el-radio label="2">
                  <el-input size="small" style="width: 88px;" value="200" disabled />
                  <span style="color: rgba(0,0,0,.65);margin-left: 4px;">人</span>
                </el-radio>
              </el-radio-group>
              <div class="desc">每日00:00开始自动通过新客户申请数量上限</div>
            </el-form-item>
            <el-form-item label="接受频率：">
              <div class="threshold-flex">
                <el-input size="small" v-model="form.mini"/>
                <span style="color: rgb(136, 137, 153);">-</span>
                <el-input size="small" v-model="form.max"/>
                <span>秒</span>
                <span class="recommend-value">使用推荐值</span>
              </div>
              <div class="desc">自动通过新客户申请的间隔时间区间</div>
            </el-form-item>
            <el-form-item label="休眠时段：">
              <el-switch v-model="form.sleepTime"/>
              <span class="tips">开启后，休眠时段内新客户正常收录到待接受列表，但不执行添加，过后自动恢复</span>
              <div class="sleep-rows-item">
                <span>每日</span>
                <el-time-select size="small" placeholder="选择时间" style="width: 118px;"/>
                <span style="color: rgb(136, 137, 153);">-</span>
                <el-time-select size="small" placeholder="选择时间" style="width: 118px;"/>
                <span>不自动通过</span>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">接受条件
              <span style="font-size: 12px;font-weight: 400;color: rgba(0, 0, 0, .45);">（同时满足所有条件才会被接受）</span>
            </div>
          </div>
          <div class="card-content">
            <el-form-item label="来源：">
              <el-radio-group v-model="form.from">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">只接受部分来源</el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.from === 2">
                <div class="condition-label">接受的来源：</div>
                <div class="condition-value">
                  <el-checkbox v-for="(item, index) in sourceList" :key="index">{{item}}</el-checkbox>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="昵称：">
              <el-radio-group v-model="form.nick">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">
                  <span style="color: rgb(251, 88, 78);">不接受</span>部分昵称
                </el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.nick === 2">
                <div class="condition-label"><span style="color: rgb(251, 88, 78);">不接受</span>的昵称：</div>
                <div class="condition-value">
                  <el-input size="small" placeholder="最多10个字按回车确认" />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="验证消息：">
              <el-radio-group v-model="form.validate">
                <el-radio :label="1">全部接受</el-radio>
                <el-radio :label="2">只接受部分验证消息</el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.validate === 2">
                <div class="condition-label">接受的验证消息：</div>
                <div class="condition-value">
                  <el-input size="small" placeholder="最多10个字按回车确认" />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="企业微信：">
              <el-radio-group v-model="form.wechat">
                <el-radio :label="0">全部接受</el-radio>
                <el-radio :label="1">全部不接受</el-radio>
                <el-radio :label="2">
                  <span style="color: rgb(251, 88, 78);">不接受</span>部分企业
                </el-radio>
              </el-radio-group>
              <div class="condition-block" v-if="form.wechat === 2">
                <div class="condition-label">
                  <span style="color: rgb(251, 88, 78);">不接受</span>的企业：
                </div>
                <div class="condition-value">
                  <el-input size="small" placeholder="最多10个字按回车确认" />
                </div>
              </div>
            </el-form-item>
            <el-form-item label="黑名单客户：">
              <el-radio-group v-model="form.black">
                <el-radio label="1">全部接受</el-radio>
                <el-radio label="2">全部不接受</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <TaskInfoDialog :visible="taskInfoVisible" @handCloseDialog="onHandCloseAcceptDialog" />
    <div class="new-fan-footer">
      <el-button size="small" type="primary">保存修改</el-button>
    </div>
  </div>
</template>
<script>
import TaskInfoDialog from './components/taskInfoDialog'
export default {
  data() {
    return {
      taskInfoVisible: false,
      checked: true,
      form: {
        toplimit: 0,
        mini: '',
        max: '',
        sleepTime: '',
        from: 1,
        nick: '',
        validate: 1,
        wechat: 0,
        black: 1
      },
      sourceList: ['扫一扫添加','名片添加','手机号添加','群聊添加','其他'],
    }
  },
  components: {
    TaskInfoDialog
  },
  methods: {
    onHandCloseAcceptDialog() {
      this.taskInfoVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.new-fan-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .new-fan-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .head-title {
      font-size: 14px;
      line-height: 22px;
      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;;
        font-weight: 400;
        &:hover + .example-modal {
          display: block;
        }
      }
    }
    .head-setting {
      display: flex;
      align-items: center;
      .check-box {
        color: rgba(0, 0, 0, .65);
        font-size: 14px;
        line-height: 22px;
        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }
  .new-fan-body {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;
      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;
          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }
        .card-content {
          padding: 20px 20px 0;
          font-size: 14px;
          line-height: 22px;
          .desc {
            font-size: 14px;
            margin-top: 4px;
            color: rgba(0, 0, 0, 0.45);
          }
          .tips {
            margin-left: 4px;
            color: rgba(0, 0, 0, 0.45); 
          }
          .sleep-rows-item {
            margin-top: 12px;
            display: grid;
            column-gap: 4px;
            grid-template-columns: 30px 118px 6px 118px 78px;
          }
          .threshold-flex {
            display: grid;
            column-gap: 4px;
            grid-template-columns: 88px 6px 88px 14px 80px;
            .recommend-value {
              color: #3070ff;
            }
          }
          .condition-block {
            margin-top: 12px;
            padding: 16px;
            background: #f7f7f7;
            border-radius: 2px;
            border: 1px solid #e9e9e9;
            display: flex;
            align-items: center;
            .condition-label {
              width: 120px;
            }
          }
          .flex-grid-row {
            display: grid;
            grid-template-columns: 48px 1fr 60px 88px;
            column-gap: 8px;
            margin-bottom: 20px;
            align-items: center;
            .cover-image {
              width: 48px;
              height: 48px;
            }
            .context {
              .status {
                font-size: 16px;
                font-weight: 600;
                color: #52c41a;
              }
              .desc {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.45);
              }
            }
            .btn {
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
  .new-fan-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
</style>